<template>
	<view class="index">
		<view class="head-bg"></view>
		<view class="flex align-center justify-between" @click="goUserInfo">
			<view class="user">
				<view class="name">{{info.title}}</view>
				<view class="department">{{info.msg}}</view>
			</view>
			<text class="iconfont text-white">&#xe64e;</text>
		</view>

		<view class="total flex align-center justify-between">
			<view class="item" @click="goOrderList('')">
				<text class="title">我的租车订单</text>
				<view class="flex align-center padding-t8">
					<text class="num">{{info.order_count}}</text>
					<text class="iconfont">&#xe64e;</text>
				</view>
			</view>
			<block v-if="info.audit_count !== null">
				<view class="divider"></view>
				<view class="item" @click="goOrderList('1')">
					<text class="title">需我审核</text>
					<view class="flex align-center padding-t8">
						<text class="num">{{info.audit_count}}</text>
						<text class="iconfont">&#xe64e;</text>
					</view>
				</view>
			</block>
		</view>

		<view v-for="(item, index) in form_type_data" :key="index" class="menu-item" @click="goApplicationForm(item)">
			<view class="icon-img">
				<image v-if="index === 1" src="../../static/menu-img01.png" mode="aspectFill"></image>
				<image v-if="index !== 1" src="../../static/menu-img02.png" mode="aspectFill"></image>
			</view>
			<view class="flex-1 menu-title">
				<text>{{item.title}}</text>
			</view>
			<text class="iconfont">&#xe64b;</text>
		</view>
		<!-- <view class="menu-item" @click="goTemporaryForm">
			<view class="icon-img">
				<image src="../../static/menu-img02.png" mode="aspectFill"></image>
			</view>
			<view class="flex-1 menu-title">
				<text>特殊用车申请</text>
			</view>
			<text class="iconfont">&#xe64b;</text>
		</view>
		<view class="menu-item" @click="goFileForm">
			<view class="icon-img">
				<image src="../../static/menu-img01.png" mode="aspectFill"></image>
			</view>
			<view class="flex-1 menu-title">
				<text>文件配送</text>
			</view>
			<text class="iconfont">&#xe64b;</text>
		</view> -->

		<view v-if="info.wechat_bind_show" class="notify">
			<text>{{ info.wechat_bind_msg }}</text>
			<view class="btn" @click="goWebview">关联</view>
		</view>
		<nick-name ref="name" @change="getData"></nick-name>
	</view>
</template>

<script>
	import nickName from './nick-name.vue'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			nickName
		},
		data() {
			return {
				info: {},
				form_type_data: []
			}
		},
		computed: {
			...mapState('login', ['token'])
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		onShow() {
			if (this.token) {
				this.getData()
			}
		},
		methods: {
			goWebview() {
				uni.redirectTo({
					url: '/pages/webview/webview?url=' + encodeURIComponent(this.info.wechat_bind_url)
				})
			},
			getData() {
				this.$api.homeIndexApi().then(res => {
					this.info = res.data
					this.$store.commit('common/SET_COMPANY', res.data)
					this.$store.commit('common/SET_FORM_TYPE_DATA', res.data.form_type_data)
					this.form_type_data = res.data.form_type_data

					if (!res.data.roster_name) {
						this.$refs.name.open()
					}
				}).catch(err => {
					console.log(err);
				})
			},
			goOrderList(status) {
				this.$store.commit('common/SET_STATUS', status)
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			goUserInfo() {
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			// 前往常规用车申请
			goApplicationForm(item) {
				if (item.value == 1) {
					uni.navigateTo({
						url: '/pages/select-cat/select-cat'
						// url: '/pages/application-form/application-form'
					})
				} else if (item.value == 2) {
					uni.navigateTo({
						url: '/pages/temporary-form/temporary-form'
					})
				} else if (item.value == 3) {
					uni.navigateTo({
						url: '/pages/file-form/file-form'
					})
				}
			},
			// 临时用车申请
			goTemporaryForm() {
				uni.navigateTo({
					url: '/pages/temporary-form/temporary-form'
				})
			},
			// 文件配送
			goFileForm() {
				uni.navigateTo({
					url: '/pages/file-form/file-form'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notify {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 999;
		bottom: 24rpx;
		display: flex;
		font-size: 26rpx;
		align-items: center;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		justify-content: space-between;

		.btn {
			font-size: 24rpx;
			padding: 6rpx 24rpx;
			border-radius: 8rpx;
			color: var(--primary-color);
			border: 1px solid var(--primary-color);
		}
	}

	.index {
		position: relative;
		z-index: 9;
		padding: 32rpx;

		&::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
			width: 100%;
			height: 290rpx;
			background-color: var(--primary-color);
		}

		.user {

			.name {
				color: #FFFFFF;
				font-size: 34rpx;
				font-weight: 600;
				line-height: 48rpx;
			}


			.department {
				padding-top: 4rpx;
				color: #FFFFFF;
				font-weight: 300;
				font-size: 26rpx;
				line-height: 36rpx;
			}
		}

		.total {
			padding: 32rpx;
			margin-top: 60rpx;
			margin-bottom: 44rpx;
			border-radius: 12rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.06);

			.item {
				flex: 1;
				width: 290rpx;
				height: 160rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				.title {
					font-weight: 400;
					font-size: 30rpx;
					line-height: 44rpx;
					color: rgba(0, 0, 0, 0.7);
				}

				.num {
					color: var(--primary-color);
					font-weight: 600;
					font-size: 48rpx;
					padding-right: 8rpx;
					display: inline-block;
				}

				.iconfont {
					color: rgba(153, 153, 153, 0.9);
				}
			}

			.divider {
				width: 1px;
				height: 100rpx;
				background-color: rgba(230, 230, 230, 1);
			}
		}

		.menu-item {
			display: flex;
			padding: 36rpx;
			align-items: center;
			margin-bottom: 28rpx;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			justify-content: space-between;

			.icon-img {
				width: 52rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.menu-title {
				color: #000000;
				font-weight: 600;
				font-size: 34rpx;
				line-height: 48rpx;
				padding-left: 32rpx;
			}

			.iconfont {
				font-size: 24rpx;
				font-weight: 600;
			}
		}
	}
</style>